body {
    background: #f0eff5;
}


.container {
    padding-bottom: 150px;
}


.content-list {
    position: relative;
    width: 640px;
    border-bottom: 1px solid #ddd;
}

    .content-list .list {
        position: relative;
        padding-top: 25px;
        margin-top: 20px;
        background: #fff;
        padding-bottom: 1px;
    }

        .content-list .list .hd > img {
            float: left;
            width: 68px;
            height: 68px;
            margin-left: 20px;
        }

        .content-list .list .hd p {
            margin-left: 105px;
        }

        .content-list .list .hd .name {
            font-size: 28px;
            padding-top: 3px;
        }

        .content-list .list .hd .date {
            font-size: 20px;
            color: #999;
            margin-top: 5px;
        }

        .content-list .list .guanzhu {
            position: absolute;
            right: 20px;
            top: 28px;
            width: 116px;
            height: 46px;
            line-height: 46px;
            text-align: center;
            font-size: 24px;
            color: #f84443;
            border: 1px solid #ddd;
            background: #fff;
            z-index: 1;
        }

            .content-list .list .guanzhu big {
                font-size: 40px;
                vertical-align: -5px;
            }

        .content-list .list .guanzhu-at {
            color: #666;
        }

            .content-list .list .guanzhu-at big {
                display: inline-block;
                width: 16px;
                height: 7px;
                margin-right: 2px;
                vertical-align: 5px;
                border-left: 2px solid #666;
                border-bottom: 2px solid #666;
                transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
            }

        .content-list .list .hot {
            position: absolute;
            top: -7px;
            right: 114px;
        }

        .content-list .list .text {
            font-size: 28px;
            margin: 10px 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .content-list .list .pic-list {
            margin: 0 20px;
        }

            .content-list .list .pic-list li {
                float: left;
                width: 194px;
                height: 194px;
                margin-left: 9px;
                margin-bottom: 9px;
            }

                .content-list .list .pic-list li:nth-child(3n+1) {
                    margin-left: 0;
                }

.menu-list {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 640px;
    padding: 20px 0;
    border-top: 1px solid #ddd;
    margin-top: 10px;
    background: #fff;
}

    .menu-list li {
        float: left;
        width: 33.333333%;
        text-align: center;
        font-size: 20px;
        color: #999;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

        .menu-list li:nth-child(2) {
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }

        .menu-list li > img {
            vertical-align: -5px;
            margin-right: 6px;
        }

.content-list .layout {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2);
    z-index: 2;
}

.content-list .list .pro-info {
    background: #f7f7f7;
    padding: 20px;
    margin: 20px;
}

    .content-list .list .pro-info > a {
        color: #0088cc;
        word-wrap: break-word;
        padding-left: 40px;
        background: url(http://cdn.xsmore.com/Images/bcy/sq-link-icon.png) no-repeat 0 9px;
        background-size: 28px 30px;
        width: 520px;
        display: block;
    }

        .content-list .list .pro-info > a img {
            float: left;
            vertical-align: -3px;
            margin-right: 10px;
        }

    .content-list .list .pro-info .info {
        margin-top: 20px;
    }

        .content-list .list .pro-info .info > img {
            float: left;
            width: 200px;
            height: 200px;
        }

        .content-list .list .pro-info .info .name {
            margin-left: 220px;
            padding-top: 5px;
            font-size: 24px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .content-list .list .pro-info .info .sale {
            font-size: 24px;
            color: #666;
            margin-top: 20px;
            margin-left: 220px;
        }

        .content-list .list .pro-info .info .btn {
            margin-top: 20px;
            font-family: arial;
            margin-left: 220px;
        }

            .content-list .list .pro-info .info .btn .new {
                color: #e84845;
                padding-right: 5px;
            }

            .content-list .list .pro-info .info .btn .old {
                color: #999;
                padding-right: 5px;
                font-size: 20px;
                text-decoration: line-through;
            }

            .content-list .list .pro-info .info .btn .link-btn {
                display: inline-block;
                width: 96px;
                height: 48px;
                line-height: 48px;
                text-align: center;
                color: #fff;
                font-size: 28px;
                border-radius: 6px;
                background: #f84443;
            }

.content-list .shang {
    font-size: 46px;
    color: #f2bb1d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border: 1px solid #ddd;
    border-radius: 55px;
    text-align: center;
    margin: 30px auto 10px;
}

.content-list .shang-count {
    text-align: center;
    font-size: 20px;
    color: #999;
    margin-bottom: 30px;
}


.comment {
    background: #fff;
    margin-top: 20px;
}

    .comment .tab {
        padding-left: 20px;
        border-bottom: 1px solid #ddd;
    }

        .comment .tab li {
            float: left;
            width: 80px;
        }

            .comment .tab li span {
                display: inline-block;
                height: 70px;
                line-height: 70px;
                padding: 0 10px;
                color: #666;
                font-size: 24px;
            }

            .comment .tab li.at span {
                color: #333;
                height: 68px;
                border-bottom: 2px solid #f84443;
            }

    .comment .return-comment li {
        position: relative;
        padding: 20px 0 20px 20px;
    }

        .comment .return-comment li > img {
            float: left;
            width: 60px;
            height: 60px;
            border-radius: 32px;
        }

        .comment .return-comment li .name {
            margin-left: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 28px;
        }

        .comment .return-comment li .time {
            margin-left: 80px;
            margin-top: 10px;
            color: #999;
            font-size: 20px;
        }

        .comment .return-comment li .number {
            margin-left: 345px;
            margin-top: 10px;
            color: red;
            font-size: 20px;
        }

        .comment .return-comment li .mes {
            margin-left: 80px;
            margin-top: 10px;
            margin-right: 30px;
            color: #666;
            font-size: 28px;
        }

            .comment .return-comment li .mes a {
                color: #0088cc;
            }

        .comment .return-comment li .zan {
            position: absolute;
            right: 20px;
            top: 20px;
            color: #999;
        }

        .comment .return-comment li .zan-at {
            color: #f84443;
        }

        .comment .return-comment li .zan img {
            vertical-align: -2px;
            margin-right: 5px;
        }

.com-menu-layout {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    z-index: 4;
}

.com-menu {
    position: fixed;
    bottom: 20px;
    width: 100%;
    max-width: 640px;
    z-index: 4;
}

    .com-menu p {
        height: 88px;
        line-height: 88px;
        text-align: center;
        font-size: 32px;
        margin: 0 20px;
        background: #fff;
        border-top: 1px solid #ddd;
    }

        .com-menu p:first-child {
            border-top: none;
            border-radius: 10px 10px 0 0;
        }

        .com-menu p:nth-child(2) {
            border-radius: 0 0 10px 10px;
        }

    .com-menu .cancel {
        margin-top: 20px;
        border-radius: 10px;
        color: #157efb;
    }




.link {
    position: fixed;
    right: 40px;
    bottom: 60px;
    width: 106px;
    height: 106px;
    z-index: 3;
}

    .link img {
        display: block;
        width: 100%;
        height: 100%;
    }


.filter-pic {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 10;
}

    .filter-pic .slick {
        position: absolute;
        top: 50%;
        margin-top: -400px;
        left: 50%;
        margin-left: -320px;
        width: 640px;
        height: 640px;
    }

        .filter-pic .slick img {
            display: block;
            width: 640px;
            height: 640px;
        }

    .filter-pic .number {
        position: absolute;
        top: 50%;
        margin-top: 270px;
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 30px;
    }

.comment-tips {
    position: fixed;
    left: 50%;
    margin-left: -240px;
    top: 50%;
    margin-top: -180px;
    width: 480px;
    height: 360px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    z-index: 5;
    transform: scale(0);
    -webkit-transform: scale(0);
    transition: transform .5s;
    -webkit-transition: -webkit-transform .5s;
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

    .comment-tips .hd {
        font-size: 32px;
        color: #666;
        height: 80px;
        line-height: 80px;
        text-align: center;
        background: #f5f5f5;
    }

    .comment-tips textarea {
        width: 480px;
        height: 190px;
        padding: 10px;
        display: block;
        margin: 0 auto;
        resize: none;
        font-size: 28px;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        border-left: none;
        border-right: none;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .comment-tips .btn .cancel {
        float: left;
        width: 240px;
        height: 90px;
        line-height: 90px;
        font-size: 32px;
        color: #0c85fe;
        text-align: center;
        border-right: 1px solid #ddd;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .comment-tips .btn .sure {
        float: right;
        width: 240px;
        height: 90px;
        line-height: 90px;
        font-size: 32px;
        color: #0c85fe;
        text-align: center;
    }



.report-tips {
    position: fixed;
    left: 50%;
    margin-left: -240px;
    top: 50%;
    margin-top: -220px;
    width: 480px;
    height: 440px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    z-index: 5;
    transform: scale(0);
    -webkit-transform: scale(0);
    transition: transform .5s;
    -webkit-transition: -webkit-transform .5s;
    webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

    .report-tips .hd {
        font-size: 32px;
        color: #666;
        height: 80px;
        line-height: 80px;
        text-align: center;
        background: #f5f5f5;
        border-bottom: 1px solid #ddd;
    }

    .report-tips textarea {
        width: 480px;
        height: 147px;
        padding: 10px;
        display: block;
        margin: 0 auto;
        resize: none;
        font-size: 28px;
        border: none;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        margin-bottom: 20px;
    }

    .report-tips .btn .cancel {
        float: left;
        width: 240px;
        height: 80px;
        line-height: 80px;
        font-size: 32px;
        color: #0c85fe;
        text-align: center;
        border-right: 1px solid #ddd;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .report-tips .btn {
        border-top: 1px solid #ddd;
    }

        .report-tips .btn .sure {
            float: right;
            width: 240px;
            height: 80px;
            line-height: 80px;
            font-size: 32px;
            color: #0c85fe;
            text-align: center;
        }

    .report-tips .tips-pro {
        margin-left: 20px;
        margin-right: 20px;
        border: 1px solid #ddd;
        margin-bottom: 20px;
    }

        .report-tips .tips-pro img {
            float: left;
            width: 90px;
            height: 90px;
        }

        .report-tips .tips-pro .text {
            margin-left: 110px;
            font-size: 18px;
            color: #666;
        }

            .report-tips .tips-pro .text .top {
                display: block;
                font-size: 24px;
                color: #333;
                margin-bottom: 5px;
            }

            .report-tips .tips-pro .text .mes {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }

.user-pic-list li img {
    position: absolute;
    top: 0;
    width: 139.8px;
    height: 139.8px;
}

.user-pic-list {
    margin: 1rem 1.0rem 0;
}

.user-pic-list li {
        float: left;
        width: 23%;
        margin-right: 2%;
    }

 .user-pic-list li .img {
            position: relative;
            padding-top: 100%;
        }


@keyframes show {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes show {
    0% {
        -webkit-transform: scale(0);
    }

    100% {
        -webkit-transform: scale(1);
    }
}
